<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">管理员列表</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card" style="margin-top: 15px">
    <el-button type="success" size="medium" @click="add()">新增</el-button>
    <el-table :data="tableData" style="width: 100%;margin-top: 15px">
      <el-table-column
          prop="id"
          label="id">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        {{ tableData.status === 1 ? "正常" : "禁用" }}
      </el-table-column>
      <el-table-column
          prop="create_time"
          label="日期">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--              {{scope.row}}}-->
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          <el-button type="warning" size="mini" @click="auth(scope.row.id)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>

      <!-- 分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 10, 15, 50]"
          :page-size="param.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--        添加的表单-->
      <el-dialog
          title="添加"
          :visible.sync="addDialogdialogVisible"
          width="30%">
        <el-form ref="form" :model="addForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="addForm.status" :label="1">启用</el-radio>
            <el-radio v-model="addForm.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSave()">确 定</el-button>
          </span>
      </el-dialog>

      <!--        编辑表单-->
      <el-dialog
          title="编辑表单"
          :visible.sync="editDialogdialogVisible"
          width="30%">
        <el-form ref="form" :model="editForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="editForm.username"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="editForm.status" :label="1">启用</el-radio>
            <el-radio v-model="editForm.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editSave()">确 定</el-button>
          </span>
      </el-dialog>

      <!--        分配角色-->
      <el-dialog
          title="分配角色"
          :visible.sync="authDialogdialogVisible"
          width="30%">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.id" v-for="(item, index) in roleList" :key="index">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelAuth">取 消</el-button>
            <el-button type="primary" @click="authSave">确 定</el-button>
          </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      param: {
        key: '',
        page: 1,
        limit: 10
      },
      total: 0,
      currentPage: 1,
      addDialogdialogVisible: false,
      addForm: {
        username: '',
        password: '',
        status: 1
      },
      editDialogdialogVisible:false,
      editForm: {
        username: '',
        // password: '',
        status: '',
      },
      authDialogdialogVisible:false,
      authForm: {
        id: '',
        role_ids:{}
      },
      roleList: [],//所有的角色信息
      checkList: [],//已拥有的角色
      admin_id: ''
    };
  },
  created() {
    this.getList()
  },
  methods:{
    // 查询
    async getList() {
      const {data:res} =await this.$ajax.get('http://124.223.83.80:8082/api/Admin/index',{params:this.param})
      console.log(res);
      this.tableData = res.data
      this.total = res.total
      // console.log(res);
    },
    //每页多少条
    handleSizeChange(val){
      // console.log(val);
      this.param.limit=val;
      this.getList()
    },
    // 当前页码
    handleCurrentChange(val){
      // console.log(val);
      this.param.page=val;
      this.getList()
    },
    // 删除
    async del(id) {
      const {data: res} = await this.$ajax.get('http://124.223.83.80:8082/api/Admin/delete', {params: {id: id}})
      if (res.code == 200) {
        this.$msg.success(res.msg)
        this.getList()
      } else {
        this.$msg.error(res.msg)
      }
    },
    //前端添加窗口
    add(){
      // 打开Dialog弹框
      this.addDialogdialogVisible=true
    },
    //将add()数据保存到数据库
    async addSave() {
      // 关闭Dialog弹框
      this.addDialogdialogVisible = false
      //发送数据
      const {data:res} =await this.$ajax.post('http://124.223.83.80:8082/api/Admin/add',this.addForm)
      if (res.code == 200) {
        this.$msg.success(res.msg)
        // 重新请求查询
        this.getList()
        // 将数据置空
        this.addForm.username = ''
        this.addForm.password = ''
      }else{
        this.$msg.error(res.msg)
      }
    },
    edit($info){
      // 打开Dialog弹框
      this.editDialogdialogVisible=true
      //将数据赋值
      this.editForm.id = $info.id
      this.editForm.username = $info.username
      this.editForm.status = $info.status
    },
    async editSave(){
      // 关闭Dialog弹框
      this.editDialogdialogVisible = false
      //发送数据
      const {data:res} =await this.$ajax.post('http://124.223.83.80:8082/api/Admin/update',this.editForm)
      if (res.code == 200) {
        this.$msg.success(res.msg)
        // 重新请求查询
        this.getList()
        // 将数据置空
        this.addForm.username = ''
        this.addForm.status = ''
        this.addForm.id = ''
      }else{
        this.$msg.error(res.msg)
      }
    },
    //分配角色
    async auth(id) {
      this.admin_id = id
      //展示分配角的弹窗
      // 打开Dialog弹框
      this.authDialogdialogVisible = true
      // 获取该用户已经拥有的角色信息
      // console.log(id);
      const {data: checkListData} = await this.$ajax.get('http://124.223.83.80:8082/api/RoleAssign/read2', {params:{admin_id:id}});
      if (checkListData.code == 200) {
        // console.log(checkListData.data)
        //闪烁现象
        this.checkList = checkListData.data
      }
      //获取所有角色信息
      const {data: res} = await this.$ajax.get('http://124.223.83.80:8082/api/RoleAssign/index');
      // console.log(res.data);
      this.roleList = res.data
    },
    cancelAuth() {
      this.authDialogdialogVisible = false;
      this.admin_id = '';
      this.checkList = [];
    },
    async authSave(){
      //提交数据
      // console.log(this.checkList)
      // console.log(this.admin_id)
      let postData = {
        admin_id: this.admin_id,
        role_id: this.checkList.toString(),
      };

      const {data: res} = await this.$ajax.post('http://124.223.83.80:8082/api/RoleAssign/save', postData);
      if (res.code == 200) {

        this.$msg.success(res.msg);
        this.authDialogdialogVisible = false;
        this.admin_id = '';
        this.checkList = [];
        this.getList();
      } else {
        // console.log(res.msg);
        this.$msg.error(res.msg)
      }
    }
  },
};
</script>



<style scoped>

</style>